Skip to content

feat(landing): Open Graph share image + meta tags#43

Merged
sgwannabe merged 1 commit into
mainfrom
feat/og-image
May 30, 2026
Merged

feat(landing): Open Graph share image + meta tags#43
sgwannabe merged 1 commit into
mainfrom
feat/og-image

Conversation

@sgwannabe

Copy link
Copy Markdown
Contributor

What

Adds a social-share (Open Graph / Twitter) image and the meta tags so links to memex.quest unfurl with a branded card instead of text-only.

Before After
Unfurl title + description, no image branded 1200×630 card + full og/twitter tags

Files

  • assets/og-image.png — 1200×630, 327 KB. Hook: "Coding agents forget. memex remembers." On-brand (Fraunces + JetBrains Mono, dark/amber tokens, glowing logo lockup, bottom-right signature). Designed for thumbnail legibility — the hook + logo stay readable shrunk to a ~230px unfurl; the dense spec list was intentionally dropped because the card already renders the description text (Qdrant 1.18 · five named vectors · …) beside the image.
  • index.html — full og:* set (type, site_name, url, title, description, image + width/height/alt/type/secure_url) and twitter:card=summary_large_image. Image URL is absolute: https://memex.quest/assets/og-image.png.
  • scripts/og/og-image.html — reproducible source template (build tooling, not served). Verified: re-rendering via headless Chrome reproduces assets/og-image.png byte-identically (sha256 match).

Deploy

This is a landing change (index.html + assets/**), so once the deploy-landing workflow (#42) is on main, merging this PR triggers an automatic publish to gh-pages. This PR is also the live test of that workflow.

Verification done

  • Rendered + previewed at real Slack sizes (360/460px) and iMessage size (230px).
  • Template → PNG reproducibility confirmed (sha256 identical).
  • Only 3 files changed; no unrelated/demo files included.

🤖 Generated with Claude Code

Social unfurls (Slack/iMessage/Twitter/Discord) showed text-only because
the page had no og:image and no og:/twitter: tags. Adds:

- assets/og-image.png — 1200x630 share image ("Coding agents forget.
  memex remembers."), on-brand (Fraunces + JetBrains Mono, dark/amber
  tokens, glowing logo lockup). Tuned for thumbnail legibility: the hook
  and brand survive when shrunk to a ~230px unfurl; specs live in the
  description text the card renders beside the image.
- index.html — full og:* + twitter:card=summary_large_image tag set,
  absolute image URL https://memex.quest/assets/og-image.png.
- scripts/og/og-image.html — reproducible source template (build tooling,
  not served); re-renders the PNG byte-identically via headless Chrome.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@coderabbitai

coderabbitai Bot commented May 30, 2026

Copy link
Copy Markdown

Warning

Review limit reached

@sgwannabe, we couldn't start this review because you've reached your PR review rate limit.

More reviews will be available in 25 minutes and 13 seconds. Learn how PR review limits work.

Your organization has run out of usage credits. Purchase more in the billing tab.

⌛ How to resolve this issue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available.

Please see our Fair Usage Limits Policy for further information.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: f728c0ad-f116-4bda-bbdd-aa9fba684227

📥 Commits

Reviewing files that changed from the base of the PR and between d06375f and a049559.

⛔ Files ignored due to path filters (1)
  • assets/og-image.png is excluded by !**/*.png
📒 Files selected for processing (2)
  • index.html
  • scripts/og/og-image.html
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feat/og-image

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@gemini-code-assist gemini-code-assist Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request adds Open Graph and Twitter social share metadata to "index.html" and introduces a source HTML template ("scripts/og/og-image.html") for generating the social share image. The review feedback suggests removing redundant "twitter:title" and "twitter:image" tags, as Twitter's crawler automatically falls back to the corresponding Open Graph tags.

Comment thread index.html
Comment on lines +21 to +23
<meta name="twitter:title" content="memex — local memory for coding agents" />
<meta name="twitter:description" content="Coding agents forget. memex remembers — the local memory layer for Claude Code and Codex, powered by Qdrant." />
<meta name="twitter:image" content="https://memex.quest/assets/og-image.png" />

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

Twitter's crawler automatically falls back to Open Graph tags (og:title, og:image) if the corresponding twitter:* tags are not specified. Since twitter:title and twitter:image are identical to og:title and og:image, they are redundant. Removing them simplifies the <head> section and avoids potential desynchronization in the future.

Suggested change
<meta name="twitter:title" content="memex — local memory for coding agents" />
<meta name="twitter:description" content="Coding agents forget. memex remembers — the local memory layer for Claude Code and Codex, powered by Qdrant." />
<meta name="twitter:image" content="https://memex.quest/assets/og-image.png" />
<meta name="twitter:description" content="Coding agents forget. memex remembers — the local memory layer for Claude Code and Codex, powered by Qdrant." />

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: a049559ecf

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment thread index.html
<meta property="og:url" content="https://memex.quest/" />
<meta property="og:title" content="memex — local memory for coding agents" />
<meta property="og:description" content="Coding agents forget. memex remembers — the local memory layer for Claude Code and Codex, powered by Qdrant 1.18 with five named vectors, sparse IDF, and ColBERT MaxSim multivectors." />
<meta property="og:image" content="https://memex.quest/assets/og-image.png" />

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Point social images at the deployed Pages host

If the landing page is still shared from the current public URL, this absolute memex.quest image URL prevents unfurls from showing the new card: the repo still documents the live landing as https://two-weeks-team.github.io/memex/, and a repo-wide search shows no CNAME or deploy config that publishes memex.quest. In that context, crawlers reading the GitHub Pages page will try to fetch the image from a different, unconfigured host; use the deployed Pages URL (or add the custom-domain deployment in the same change) so the OG/Twitter images are actually reachable.

Useful? React with 👍 / 👎.

@sgwannabe sgwannabe merged commit f0a7dc1 into main May 30, 2026
5 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant